"use client";
import { PaletteMode, Paper } from "@mui/material";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, alpha, createTheme } from "@mui/material/styles";
import { message } from "antd";
import * as React from "react";
import AppAppBar from "./components/AppAppBar";
import getLPTheme from "./getLPTheme";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mode, setMode] = React.useState<PaletteMode>("light");
  const LPtheme = createTheme(getLPTheme(mode));
  const defaultTheme = createTheme({ palette: { mode } });

  message.config({
    duration: 2,
    maxCount: 2,
  });

  const toggleColorMode = () => {
    // 黑白主题定制
    // setMode((prev) => (prev === "dark" ? "light" : "dark"));
  };

  return (
    <>
      <ThemeProvider theme={LPtheme}>
        <CssBaseline />
        <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
      </ThemeProvider>

      <ThemeProvider theme={defaultTheme}>
        <Box
          id="hero"
          sx={(theme) => ({
            width: "100%",
            backgroundImage:
              theme.palette.mode === "light"
                ? "linear-gradient(180deg, #CEE5FD, #FFF)"
                : `linear-gradient(#02294F, ${alpha("#090E10", 0.0)})`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 30%",
          })}
        >
          {children}
        </Box>
        <Box
          sx={{
            textAlign: "center",
            fontSize: "12px",
          }}
        >
          <Paper sx={{ padding: "3px 0", background: "rgb(250, 250, 250)" }}>
            <div>
              Address: 1068 Xueyuan Avenue Shenzhen University Town Shenzhen
              P.R.China
            </div>
            <div>
              Copyright: ©Shenzhen Institute of Advanced Technology, Chinese
              Academy of Sciences
            </div>
          </Paper>
        </Box>
      </ThemeProvider>
    </>
  );
}
